<template>
  <div id="CustomTableHeader">
    <el-dialog title="自定义字段" :visible.sync="isDialog" :before-close="close">
      <div class="container">
        <div class="box cur">
          <div class="bar">
            <div class="line"></div>
            <div class="title">当前表头<span style="color: red; font-size: 12px">(可拖动至右侧隐藏表头,可上下拖动调整位置)</span></div>
          </div>
          <div class="items">
            <vuedraggable v-model="displayColumns" :group="groupA" animation="300" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd">
              <transition-group>
                <div class="item" v-for="item in displayColumns" :key="item.columnCode">
                  <div class="name"><span class="el-icon-rank"></span> {{ item.columnname }}</div>
                  <div class="oper">
                    <!-- <span class="el-icon-delete" @click="oper(item, index, 3)"></span> -->
                  </div>
                </div>
              </transition-group>
            </vuedraggable>
          </div>
        </div>
        <div class="box more">
          <div class="bar">
            <div class="line"></div>
            <div class="title">更多表头字段<span style="color: red; font-size: 12px">(可拖动至左侧添加表头)</span></div>
          </div>
          <div class="items">
            <vuedraggable v-model="notDisplayColumns" :group="groupB" animation="300" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass" @start="onStart" @end="onEnd">
              <transition-group style="width: 100%; height: 440px; display: block">
                <div class="item" @click="onLabel(item, index)" v-for="(item, index) in notDisplayColumns" :key="item.columnCode">{{ item.columnname }}<i class="el-icon-plus"></i></div>
              </transition-group>
            </vuedraggable>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import vuedraggable from "vuedraggable";
export default {
  components: {
    vuedraggable,
  },
  props: {
    isDialog: {
      type: Boolean,
      default: false,
    },
    type: {}, // 入转调离1234
  },
  watch: {
    isDialog: {
      handler(newVal) {
        newVal && this.getCustomHeader();
      },
    },
  },
  data() {
    return {
      displayColumns: [], //已显示的表头
      notDisplayColumns: [], //隐藏的表头
      isShow: false,
      groupA: {
        name: "itxst",
        put: true, //可以拖入
        pull: () => {
          if (this.displayColumns.length <= 5) {
            if (!this.isShow) {
              this.$message.warning("至少保留五列");
              this.isShow = true;
              setTimeout(() => {
                this.isShow = false;
              }, 3000);
            }
          }
          return this.displayColumns.length > 5;
        },
      },
      groupB: {
        name: "itxst",
        pull: true, //B组拖拽时克隆到A组
        put: true,
      },
    };
  },
  methods: {
    onStart() {
      this.drag = true;
    },
    onEnd() {
      this.drag = false;
    },
    onLabel(item, index) {
      this.displayColumns.push(item);
      this.notDisplayColumns.splice(index, 1);
    },
    async confirm() {
      this.displayColumns.forEach((i, idx) => {
        i.isDisplay = true;
        i.index = idx + 1;
      });
      if (this.type) {
        await this.$api.optionsManage.PersonnelChangeTablestyleSetting(this.type, this.displayColumns);
      } else {
        await this.$api.employeeApi.EmployeeTablestyleSetting(this.displayColumns);
      }
      this.$emit("confirm");
      this.close();
    },
    close() {
      this.$emit("update:isDialog", false);
    },
    async getCustomHeader() {
      let api1 = this.$api.optionsManage.GetColumnStyleSetting; //入转调离
      let api2 = this.$api.employeeApi.GetColumnStyleSetting; //花名册
      const {
        data: {
          data: { displayColumns, notDisplayColumns },
        },
      } = this.type ? await api1({ type: this.type }) : await api2();
      // const { data: { data: { displayColumns, notDisplayColumns }, }, } = await this.$api.optionsManage.GetColumnStyleSetting({ type: this.type });
      // const { data: { data: { displayColumns, notDisplayColumns }, }, } = await this.$api.employeeApi.GetColumnStyleSetting();
      this.displayColumns = displayColumns.sort((a, b) => a.index - b.index);
      this.notDisplayColumns = notDisplayColumns.sort((a, b) => a.index - b.index);
    },
  },
};
</script>

<style lang="less" scoped>
#CustomTableHeader {
  :deep( .el-dialog__body) {
    padding: 0;
  }
  .container {
    display: flex;
    .box:nth-child(1) {
      border-right: 1px solid #ccc;
    }
    .box {
      flex: 1;
      height: 500px;
      padding: 15px 20px;
      overflow: auto;
      display: flex;
      flex-direction: column;
      padding-bottom: 0px;
      .bar {
        display: flex;
        align-items: center;
        .line {
          background: #5cb3f0;
          width: 3px;
          height: 13px;
          margin-right: 8px;
        }
        .title {
          color: #333;
        }
      }
      .items {
        // flex: 1;
        height: 440px;
        overflow: auto;
        font-size: 12px;
      }
    }
    .cur {
      .items {
        // margin-top: 10px;
        border-top: 1px solid #ccc;
        flex: 1;
        .item {
          // padding: 5px 13px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 1px solid #ccc;
          .oper {
            display: none;
            i {
              // font-size: 30px;
              cursor: pointer;
              // margin-left: 5px;
              &:hover {
                color: #5cb3f0;
              }
            }
          }
        }
        .item:hover{
          .oper{
            display: inline-block;
          }
        }
      }
    }
    .more {
      .items {
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
        // align-items: flex-start;
        align-content: flex-start;
        .item {
          padding: 4px 10px;
          color: #5cb3f0;
          border: 1px solid #5cb3f0;
          border-radius: 3px;
          cursor: pointer;
          margin-right: 10px;
          margin-bottom: 10px;
          display: inline-block;
          &:hover {
            background: #5cb3f0;
            color: #fff;
            transition: 0.2s all;
          }
          // &:nth-last-child(1) {
          // }
        }
      }
    }
  }
  // .ghostClass {
  //   // background-color: blue !important;
  // }

  .chosenClass {
    // background-color: red !important;
    opacity: 1 !important;
  }

  .dragClass {
    // background-color: blueviolet !important;
    opacity: 1 !important;
    box-shadow: none !important;
    outline: none !important;
    background-image: none !important;
  }

  .itxst {
    margin: 10px;
  }

  .title {
    padding: 6px 0px;
  }

  .col {
    width: 40%;
    flex: 1;
    padding: 10px;
    border: solid 1px #eee;
    border-radius: 5px;
    float: left;
  }

  .col + .col {
    margin-left: 10px;
  }
  .item {
    padding: 6px 12px;
    margin: 0px 10px 0px 10px;
    // border: solid 1px #eee;
    // background-color: #f1f1f1;
  }

  .item:hover {
    background-color: #fdfdfd;
    cursor: move;
  }

  .item + .item {
    border-top: none;
    // margin-top: 6px;
  }
}
</style>
